<template>
  <div id="admin-home">
    <div class="home-list">
      <router-link to="/user/info" class="home-item" style="background: #ff9966">我的信息</router-link>
      <router-link to="/user/skill" class="home-item" style="background: #ff6666">我的经验</router-link>
      <router-link to="/user/exp" class="home-item" style="background: #ffcccc">我的技能</router-link>
    </div>
    <div class="home-list">
      <router-link to="/type" class="home-item" style="background: #996699">博客</router-link>
      <router-link to="/blog" class="home-item" style="background: #99cccc">博客类型</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  components: {}
}
</script>

<style lang="less">
#admin-home {
  .home-list {
    margin-top: 20px;
    .home-item {
      display: inline-block;
      width: 20%;
      margin: 10px;
      line-height: 150px;
      text-align: center;
      border-radius: 5px;
      box-shadow: 5px 5px 10px #ccc;
      font-size: 20px;
      font-weight: bold;
      color: #000;
    }
    @media screen and (max-width: 1200px) {
      .home-item {
        width: 30%;
      }
    }
  }
}
</style>
